<template>
  <div class="upload-container">
    <el-upload action=""
               ref="baseUpload"
               :on-change="getFile"
               :limit="1"
               :list-type="listType"
               :auto-upload="false"
               :show-file-list="showFileList">
      <el-button size="small"
                 type="primary">选择上传</el-button>
    </el-upload>
  </div>
</template>

<script>
// import { getToken } from '@/api/qiniu'

export default {
  name: 'SingleImageUpload',
  props: {
    listType: {
      type: String,
      default: 'picture',
    },
    fileSize: {
      type: String,
      default: '1',
    },
    fileType: {
      type: String,
      default: 'img',
    },
    showFileList: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      newList: '',
    }
  },
  methods: {
    getFile(file, fileList) {
      console.log(file)
      const isLt5M = file.raw.size / 1024 < this.fileSize
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 500kb!')
      }
      if (this.fileType === 'img') {
        const isJPG = file.raw.type === 'image/jpeg'
        const isPNG = file.raw.type === 'image/png'
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是JPG或者PNG格式!')
        }
        if ((isJPG || isPNG) && isLt5M) {
          this.getBase64(file.raw).then((res) => {
            const data = {}
            data.name = file.name
            data.imgUrl = res
            this.newList = data
          })
        } else {
          this.$refs.baseUpload.uploadFiles = []
        }
      } else {
        const isFile =
          file.raw.type ===
          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        if (!isFile) {
          this.$message.error('上传表格文件')
        }
        if (isFile && isLt5M) {
          this.getBase64(file.raw).then((res) => {
            const data = {}
            data.name = file.name
            data.imgUrl = res
            this.newList = data
          })
        } else {
          this.$refs.baseUpload.uploadFiles = []
        }
      }
    },
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader()
        let imgResult = ''
        console.log(reader)
        reader.readAsDataURL(file)
        reader.onload = function () {
          imgResult = reader.result
        }
        reader.onerror = function (error) {
          reject(error)
        }
        reader.onloadend = function () {
          resolve(imgResult)
        }
      })
    },
    clearImg() {
      this.$refs.baseUpload.clearFiles()
    },
  },
  watch: {
    //监听文件列表
    newList: function (newVal, oldVal) {
      this.$emit('BgImageFun', { backData: this.newList })
      this.$emit('BadgeIconFun', { backData: this.newList })
      this.$emit('ExcelFun', { backData: this.newList })
    },
  },
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
.upload-container {
  width: 100%;
  position: relative;
  @include clearfix;
  .image-uploader {
    width: 60%;
    float: left;
  }
  .image-preview {
    width: 200px;
    height: 200px;
    position: relative;
    border: 1px dashed #d9d9d9;
    float: left;
    .image-preview-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .image-preview-action {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      cursor: default;
      text-align: center;
      color: #fff;
      opacity: 0;
      font-size: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      transition: opacity 0.3s;
      cursor: pointer;
      text-align: center;
      line-height: 200px;
      .el-icon-delete {
        font-size: 36px;
      }
    }
    &:hover {
      .image-preview-action {
        opacity: 1;
      }
    }
  }
}
</style>
<style lang="scss">
.upload-container {
  .el-upload {
    text-align: left;
  }
  .image-uploader {
    width: 200px !important;
    height: 200px;
  }
  .el-upload-dragger {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px !important;
    height: 200px !important;
  }
  .el-icon-plus {
    font-size: 30px;
    color: #606266;
  }
  .el-upload__text {
    font-size: 20px;
  }
  .el-upload-dragger:hover {
    .el-icon-plus {
      color: #000;
      font-weight: bold;
    }
    .el-upload__text {
      color: #000;
      font-weight: bold;
    }
  }
}
</style>
